import React, { FC } from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import './home.less';
import { history } from 'umi';
import '@/pages/rem.js';
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom';
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
  FileOutline,
} from 'antd-mobile-icons';
const Bottom: FC = () => {
  const history = useHistory();
  const location = useLocation();
  const { pathname } = location;

  const setRouteActive = (value: string) => {
    history.push(value);
  };

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/search',
      title: '找房',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/order',
      title: '资讯',
      icon: <FileOutline />,
    },
    {
      key: '/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ];

  return (
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  );
};

export default (props:any) => {
  return (
    <div className="app">
      <div className="body">{props.children}</div>
      <div className="bottom">
        <Bottom />
      </div>
    </div>
  );
};
